<template>
    <div class="statistics">
        <div class="statistics-showthree">
            <div class="statistics-showthree-child" id="statistics-showthree-first"></div>
            <div class="statistics-showthree-child" id="statistics-showthree-second"></div>
            <div class="statistics-showthree-child" id="statistics-showthree-third"></div>
        </div>

        <div class="statistics-showtwo">
            <div class="statistics-showtwo-child" id="statistics-showtwo-first"></div>
            <div class="statistics-showtwo-child" id="statistics-showtwo-second"></div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatisticsForStatistics } from '@/utils/useful'

export default {
    data() {
        return {
            oneone: null,
            onetwo: null,
            twoone: null,
            twotwo: null,
            threeone: null,
            threetwo: null,
            fourx: [],
            foury: [],
            fivex: [],
            fivey: [],
        }
    },
    mounted() {
        const res1 = getStatisticsForStatistics();
        console.log(res1)
        res1.then((value) => {
            this.oneone = value.oneone;
            this.onetwo = value.onetwo;
            this.twoone = value.twoone;
            this.twotwo = value.twotwo;
            this.threeone = value.threeone;
            this.threetwo = value.threetwo;
            this.fourx = value.fourx;
            this.foury = value.foury;
            this.fivex = value.fivex;
            this.fivey = value.fivey;
            console.log(this.foury)


            
            this.chart1 = echarts.init(document.getElementById('statistics-showthree-first'));
            this.chart2 = echarts.init(document.getElementById('statistics-showthree-second'));
            this.chart3 = echarts.init(document.getElementById('statistics-showthree-third'));
            this.chart4 = echarts.init(document.getElementById('statistics-showtwo-first'));
            this.chart5 = echarts.init(document.getElementById('statistics-showtwo-second'));

            this.$nextTick(() => {
                let chartData1 = {

                    title: {
                        text: '做题数量',
                        left: 'center',
                        textStyle: {
                            color: '#9A6F4A',
                        },
                    },
                    color: [
                        '#ff9000',
                        '#ede9e4',
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '做题数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#FFF7EF',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center',
                                formatter: '{d}%',
                                fontSize: 40,
                                fontWeight: 'bold',
                                color: '#633E1C'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: this.oneone, name: '已做题数' },
                                { value: this.onetwo, name: '未做题数' },
                            ]
                        }
                    ]
                };


                let chartData2 = {
                    title: {
                        text: '正确率',
                        left: 'center',
                        textStyle: {
                            color: '#9A6F4A',
                        },
                    },
                    color: [
                        '#ff9000',
                        '#ede9e4',
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '正确率',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#FFF7EF',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center',
                                formatter: '{d}%',
                                fontSize: 40,
                                fontWeight: 'bold',
                                color: '#633E1C'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: this.twoone, name: '正确题数' },
                                { value: this.twotwo, name: '错误题数' },
                            ]
                        }
                    ]

                };


                let chartData3 = {
                    title: {
                        text: '做题天数',
                        left: 'center',
                        textStyle: {
                            color: '#9A6F4A',
                        },
                    },
                    color: [
                        '#ff9000',
                        '#ede9e4',
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '做题天数',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#FFF7EF',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center',
                                formatter: '{d}%',
                                fontSize: 40,
                                fontWeight: 'bold',
                                color: '#633E1C'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: this.threeone, name: '做题天数' },
                                { value: this.threetwo, name: '未做天数' },
                            ]
                        }
                    ]

                };


                let chartData4 = {
                    title: {
                        text: '题目类型分布',
                        left: 'left',
                        textStyle: {
                            color: '#9A6F4A',
                            fontSize: 20,
                        },
                    },
                    color: [
                        '#FFEACE',
                    ],
                    yAxis: {
                        type: 'category',
                        data: this.foury,
                        axisLine: {
                            lineStyle: {
                                color: '#9A6F4A', // 修改yAxis的颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 10, // 调大字体大小
                        },
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#9A6F4A', // 修改xAxis的颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 16, // 调大字体大小
                        },
                    },
                    series: [
                        {
                            data: this.fourx,
                            type: 'bar'
                        }
                    ]
                };



                let chartData5 = {
                    title: {
                        text: '题目难度分布',
                        left: 'left',
                        textStyle: {
                            color: '#9A6F4A',
                            fontSize: 20,
                        },
                    },
                    color: [
                        '#FFEACE',
                    ],
                    yAxis: {
                        type: 'category',
                        data: this.fivey,
                        axisLine: {
                            lineStyle: {
                                color: '#9A6F4A', // 修改yAxis的颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 18, // 调大字体大小
                        },
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#9A6F4A', // 修改xAxis的颜色
                            }
                        },
                        axisLabel: {
                            fontSize: 18, // 调大字体大小
                        },
                    },
                    series: [
                        {
                            data: this.fivex,
                            type: 'bar'
                        }
                    ]
                };

                this.chart1.setOption(chartData1);
                this.chart2.setOption(chartData2);
                this.chart3.setOption(chartData3);
                this.chart4.setOption(chartData4);
                this.chart5.setOption(chartData5);
            });
        });

    }
}
</script>

<style lang="scss">
.statistics {
    width: 1200px;
    margin: 0 auto;

    .statistics-showthree {
        display: flex;
        justify-content: space-between;
        margin-top: -10px;

        .statistics-showthree-child {
            padding-top: 20px;
            width: 380px;
            height: 280px;
            background-image: linear-gradient(90deg, rgb(251, 220, 208), rgb(251, 235, 208));
            backdrop-filter: blur(15px);
            border-radius: 30px;
            box-shadow: 0 8px 15px 0 rgb(0 0 0 / 20%);
        }
    }

    .statistics-showtwo {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .statistics-showtwo-child {
            width: 575px;
            height: 450px;
            border-radius: 30px;
            background-image: linear-gradient(180deg, rgb(253, 198, 135), rgb(249, 160, 83));
            backdrop-filter: blur(15px);
            box-shadow: 0 8px 15px 0 rgb(0 0 0 / 20%);
            padding-top: 20px;
            padding-left: 15px;
        }
    }

}
</style>